﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
            font-size: 14px;
        }

        #l-map {
            height: 300px;
            width: 100%;
        }

        #r-result {
            width: 100%;
        }

        .mapAutoCompleteResultPanel {
            border: 1px solid #C0C0C0;
            width: 150px;
            height: auto;
            display: none;
        }
    </style>
    <script src="~/Js/bmap.js"></script>

       @*<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nOGwVftGh5UVIpdh9usrVvKs"></script>*@
    <script src="//cdn.lizhanglong.com/js/jquery/1.x/jquery.min.js"></script>
    <title>关键字输入提示词条</title>
</head>
<body>
    <div id="l-map"></div>
    <div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:500px;" /></div>
    <div id="r-result">请输入:<input type="text" id="suggestId1" size="20" value="百度" style="width:150px;" /></div>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    <script>
        (function ($) {
            var defaults = {
                map: null,
                onconfirm: function (type, target, item) {

                },/*回车选中某条记录后触发item : {index : 1 高亮的记录，所属返回结果的index,value : {}结果数据，见AutocompleteResultPoi}*/
                autoCompleteOption: {
                    input: null,/*String|HTMLElement	文本输入框元素或其id*/
                    location: null,/*String|Map|Point	设定返回结果的所属范围。例如“北京市”。*/
                    types: null,/*Array<String>	返回数据类型。两种设置方式，
                    第一种为默认值（即设置值为空）， 将返回所有数据。如地图初始化为北京，在输入框中输入“小”，输入框下会出现包含“小”关键字的多种类型（如餐饮、地名等）的提示词条。
                    第二种设置值为"city"，将返回省市区县乡镇街道地址类型数据。如地图初始化为北京，在输入框中输入“小”，输入框下会出现“小金县”的地点名称类的提示词条。*/
                    onSearchComplete: onSearchComplete/*Function	在input框中输入字符后，发起列表检索，完成后的回调函数。参数：AutocompleteResult*/
                }
            };
            function MapAutocomplete() {
                this.options = null;
                this.inputDom = null;
                this.autoComplete = null;
            }

            function onSearchComplete(res) {

            }

            function isString(obj) {
                return typeof obj === 'string';
            }

            MapAutocomplete.prototype._init = function (self, _opts) {
                var opts = this.options = $.extend(true, {}, defaults, _opts);
                !opts.autoCompleteOption.input && (opts.autoCompleteOption.input = self.attr('id') || Math.random());
                this.autoComplete = new BMap.Autocomplete(opts.autoCompleteOption);
                this.inputDom = self;
                this.autoComplete.addEventListener('onconfirm', function (obj) {
                    console.log(arguments)
                    opts.onconfirm(obj.item);
                });
            };

            MapAutocomplete.prototype._onSearchComplete = function () {

            };
            $.fn.mapAutocomplete = function (opts) {
                var self = $(this),
                    opts = opts || {},
                    api = self.data('MapAutocomplete');
                if (!api) {
                    api = new MapAutocomplete();
                    api._init(self, opts);
                    self.data('MapAutocomplete', api);
                }
            };
        })(jQuery);
    </script>
    <script>
        //$('#suggestId').mapAutocomplete({
        //    autoCompleteOption: {
        //        location: '深圳'
        //    }
        //});
    </script>
</body>
</html>
<script type="text/javascript">

    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }

   // var map = new BMap.Map("l-map");
   // map.centerAndZoom("深圳", 12);                   // 初始化地图,设置城市和地图级别。

    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {
            "input": "suggestId1"
            , "location": '深圳',
            onSearchComplete: function (res) {
                
                return 'test';
            }
        });

    ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        setPlace();
    });

    function setPlace() {
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun() {
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }
</script>
